<template>
	<view class="content">
		<view class="list">
			<block v-for="(lab,index) in labs" :key="index">
				<navigator :url="lab.url">
					<view class="list-item">
						{{lab.title}}
					</view>
				</navigator>
			</block>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data: {
			labs: []
		},
		onLoad() {
			this.labs = [{
				url: 'gramma/computed',
				title: '计算属性',
			}, {
				url: 'gramma/express',
				title: '表达式',
			}, {
				url: 'gramma/vbind',
				title: 'v-bind、v-on、v-show指令',
			}, {
				url: 'gramma/vfor',
				title: 'v-for、v-if指令',
			}, {
				url: 'gramma/random',
				title: '随机数,on-load事件',
			}, {
				url: 'gramma/switch-button',
				title: '组件状态变换',
			}, {
				url: 'gramma/event',
				title: '事件、自定义属性',
			}, {
				url: 'product-list/layout-1',
				title: '产品列表1',
			}, {
				url: 'product-list/layout-2',
				title: '产品列表2',
			}, {
				url: 'product-list/layout-3',
				title: '产品列表3',
			}, {
				url: 'product-list/layout-4',
				title: '产品列表4',
			},]
		}
	}
</script>

<style>
	view {
		display: flex;
		flex-direction: row;
	}

	.content {
		flex-direction: column;
		flex: 1;
	}

	.list {
		width: 100%;
		flex-direction: column;
	}

	.list-item {
		width: 100%;
		padding: 20upx;
		border-top: #8F8F94 solid 1upx;
	}

	.list-item:last-child {
		border-bottom: #8F8F94 solid 1upx;
	}
</style>
